﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />	
<title>Layout</title>
<link rel="stylesheet" href="../Styles/layout.css" type="text/css" media="screen" />
<style type="text/css">
	body { font: 12px/1.5 Tahoma, sans-serif; color: #333; }
	#header { text-align: center; margin: 20px 0 10px; }
	h1 { font: 22px Georgia, serif; }
	h2 { font: 14px 'Courier New', monospace; margin-bottom: 5px; }
	a { outline: none; text-decoration: none; }
	a:visited { color: blue; }

	.sub { background: #DBEDF6; }
	.extra { background: #EAFBEA; }

	.test-grid { padding: 10px; height: 90px; border: 1px dashed #aaa; }
	.test-grid-big { padding: 10px; height: 90px; border: 1px dashed #aaa; }
	.test-grid-small { padding: 10px; height: 90px; border: 1px dashed #aaa; }
	
	
	.test-grid1 { padding: 10px; height: 70px; border: 1px dashed #aaa; }
	.test-grid-big1 { padding: 10px; height: 70px; border: 1px dashed #aaa; }
	.test-grid-small1 { padding: 10px; height: 70px; border: 1px dashed #aaa;}

	.width { font-family: 'Courier New', monospace; padding: 10px }

	#header ul { float: right; }
	#header li { float: left; padding: 10px; }
	#content { clear: both; }
	#footer { margin-bottom: 20px; }
	#footer .top { float: right; padding: 20px; }

	#page, #page2 { *position: relative; } /* 否则ie下切换宽度自适应时布局会乱掉 */
	#page2 .col-main .width { display: none }

</style>
<script type="text/javascript">
	window.onload = function() {
		var trigger = document.getElementById('togglePageId');
		trigger.onclick = function() {
			var page = document.getElementById('header').parentNode;
			page.className = (page.className == 'page') ? 'page2' : 'page';
			return false;
		}
	};
</script>
</head>
<body>
<div class="page">
	<div id="header">
		<h1>Layout</h1>
		<ul>
			<li><a id="togglePageId" href="#" hidefocus="true">自适应宽度</a></li>
		</ul>
	</div>
	<br/>
	<div>
	    <h3>
	        <b>页面宽度为980px</b>
	    </h3>
	    <h3>
	        <b>块之间的间距为10px</b>
	    </h3>
	    <h3>
	        <b>灰色部分为自适应宽度的div</b>
	    </h3>
	    <hr />
	</div>
	<br/>
	<div id="content">
		<h2>测试</h2>
		<div class="grid-1">
			<div class="box-left w100 h40">test</div>
			<div class="box-left w140 h40">test</div>
			<div class="box-left w180 h40">test</div>
			<div class="box-left w180 h40">test</div>
			<div class="box-left w140 h40">test</div>
			<div class="box-right w140 h40">test</div>
		</div>


	    <h2>一栏：.grid-1</h2>
		<div class="grid-1">
					<div class="test-grid">main<span class="width">980px</span></div>
		</div>
		<p>
		
		<br/><br/>
		
		</p>
		<h2>两栏：.grid-1-1 </h2>
		<div class="grid-1-1">
			<div class="main">
				<div class="main-wrap">
					<div class="test-grid">main<span class="width">485px 自适应</span></div>
				</div>
			</div>
			<div class="sub">
				<div class="test-grid-big">sub<span class="width">485px</span></div>
			</div>
		</div>
		<h2>两栏：.grid-1-1f </h2>
		<div class="grid-1-1f">
			<div class="main">
				<div class="main-wrap">
					<div class="test-grid">main<span class="width">485px 自适应</span></div>
				</div>
			</div>
			<div class="sub">
				<div class="test-grid-big">sub<span class="width">485px</span></div>
			</div>
		</div>
		
		<h2>两栏：.grid-1-2 </h2>
		<div class="grid-1-2">
			<div class="main">
				<div class="main-wrap">
					<div class="test-grid">main<span class="width">730px 自适应</span></div>
				</div>
			</div>
			<div class="sub">
				<div class="test-grid-big">sub<span class="width">240px</span></div>
			</div>
		</div>
		
		<h2>两栏：.grid-2-1 </h2>
		<div class="grid-2-1">
			<div class="main">
				<div class="main-wrap">
					<div class="test-grid">main<span class="width">730px 自适应</span></div>
				</div>
			</div>
			<div class="sub">
				<div class="test-grid-big">sub<span class="width">240px</span></div>
			</div>
		</div>
		
		<h2>两栏：.grid-1-3 </h2>
		<div class="grid-1-3">
			<div class="main">
				<div class="main-wrap">
					<div class="test-grid">
					    <!--内嵌-->
		                <div class="grid-1-3">
			                <div class="main">
				                <div class="main-wrap">
					                <div class="test-grid1">main<span class="width">810px 自适应</span></div>
				                </div>
			                </div>
			                <div class="sub">
				                <div class="test-grid-big1">sub<span class="width">160px</span></div>
			                </div>
		                </div>
					</div>
				</div>
			</div>
			<div class="sub">
				<div class="test-grid-big">sub<span class="width">160px</span></div>
			</div>
		</div>
		
		<h2>两栏：.grid-3-1 </h2>
		<div class="grid-3-1">
			<div class="main">
				<div class="main-wrap">
					<div class="test-grid">main<span class="width">810px 自适应</span></div>
				</div>
			</div>
			<div class="sub">
				<div class="test-grid-big">sub<span class="width">160px</span></div>
			</div>
		</div>
		
		<br/><br/>
		
		<!-- 三栏：sub : main : extra -->
		<h2>三栏：.grid-1-1-1</h2>
		<div class="grid-1-1-1">
			<div class="main">
				<div class="main-wrap">
					<div class="test-grid">main<span class="width">320px 自适应</span></div>
				</div>
			</div>
			<div class="sub">
				<div class="test-grid-big">sub<span class="width">320px</span></div>
			</div>
			<div class="extra">
				<div class="test-grid-small">extra<span class="width">320px</span></div>
			</div>
		</div>
		
		<h2>三栏：.grid-1-2-1</h2>
		<div class="grid-1-2-1">
			<div class="main">
				<div class="main-wrap">
					<div class="test-grid">main<span class="width">480px 自适应</span></div>
				</div>
			</div>
			<div class="sub">
				<div class="test-grid-big">sub<span class="width">240px</span></div>
			</div>
			<div class="extra">
				<div class="test-grid-small">extra<span class="width">240px</span></div>
			</div>
		</div>
		
		<h2>三栏：.grid-1-1-2</h2>
		<div class="grid-1-1-2">
			<div class="main">
				<div class="main-wrap">
					<div class="test-grid">main<span class="width">480px 自适应</span></div>
				</div>
			</div>
			<div class="sub">
				<div class="test-grid-big">sub<span class="width">240px</span></div>
			</div>
			<div class="extra">
				<div class="test-grid-small">extra<span class="width">240px</span></div>
			</div>
		</div>
		
		<h2>三栏：.grid-2-1-1</h2>
		<div class="grid-2-1-1">
			<div class="main">
				<div class="main-wrap">
					<div class="test-grid">main<span class="width">480px 自适应</span></div>
				</div>
			</div>
			<div class="sub">
				<div class="test-grid-big">sub<span class="width">240px</span></div>
			</div>
			<div class="extra">
				<div class="test-grid-small">extra<span class="width">240px</span></div>
			</div>
		</div>
		
		<h2>三栏：.grid-1-3-1</h2>
		<div class="grid-1-3-1">
			<div class="main">
				<div class="main-wrap">
					<div class="test-grid">main<span class="width">640px 自适应</span></div>
				</div>
			</div>
			<div class="sub">
				<div class="test-grid-big">sub<span class="width">160px</span></div>
			</div>
			<div class="extra">
				<div class="test-grid-small">extra<span class="width">160px</span></div>
			</div>
		</div>
		
		<h2>三栏：.grid-1-1-3</h2>
		<div class="grid-1-1-3">
			<div class="main">
				<div class="main-wrap">
					<div class="test-grid">main<span class="width">640px 自适应</span></div>
				</div>
			</div>
			<div class="sub">
				<div class="test-grid-big">sub<span class="width">160px</span></div>
			</div>
			<div class="extra">
				<div class="test-grid-small">extra<span class="width">160px</span></div>
			</div>
		</div>
		
		<h2>三栏：.grid-3-1-1</h2>
		<div class="grid-3-1-1">
			<div class="main">
				<div class="main-wrap">
					<div class="test-grid">main<span class="width">640px</span></div>
				</div>
			</div>
			<div class="sub">
				<div class="test-grid-big">sub<span class="width">160px</span></div>
			</div>
			<div class="extra">
				<div class="test-grid-small">extra<span class="width">160px</span></div>
			</div>
		</div>
	</div>
	<div id="footer">
		<a class="top" href="#header">返回页首</a>
	</div>
</div>
</body>
</html>

